<template>
  <div class="home">
    <el-container>
      <el-header class="first-header" height="160px">
        <el-container>
          <el-header class="second-header" height="115px">
            <el-row>
              <el-col class="hidden-md-and-down" :lg="1" :xl="1">
                <div class="my-content"></div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="19" :lg="15" :xl="10">
                <div class="my-content">
                  <el-row>
                    <el-col :span="4" class="hidden-xs-only">
                      <div class="next-content">
                        <img
                          class="logo-img"
                          src="../assets/image/common/logo.png"
                          alt=""
                        />
                      </div>
                    </el-col>
                    <el-col :span="12" :xs="23">
                      <span class="next-content project-name"
                        >足球大数据系统</span
                      >
                    </el-col>
                    <el-col :span="1" class="hidden-xs-only">
                      <div class="next-content my-block">
                        <div class="vertical-block"></div>
                      </div>
                    </el-col>
                    <el-col :span="7" class="hidden-xs-only">
                      <div class="next-content bsu_sse">体育工程学院</div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col class="hidden-sm-and-down" :md="3" :lg="4" :xl="8">
                <div class="my-content"></div>
              </el-col>
              <el-col class="hidden-sm-and-down" :md="2" :lg="3" :xl="3">
                <div class="my-content input-block">
                  <!-- <el-input
                          placeholder="请输入球员/球队"
                          prefix-icon="el-icon-search"
                          v-model="search_content"
                          clearable>
                  </el-input> -->
                </div>
              </el-col>
              <el-col class="hidden-md-and-down" :lg="1" :xl="2">
                <div class="my-content"></div>
              </el-col>
            </el-row>
          </el-header>
          <el-main class="nav-bar">
            <div class="two-dropdown">
              <el-dropdown>
                <span class="el-dropdown-link">
                  赛事
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="item in leagues"
                    :key="item.leagueId"
                  >
                    <router-link
                      :to="{
                        name: 'league',
                        params: { leagueId: item.leagueId },
                      }"
                      >{{ item.leagueName }}</router-link
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <span class="el-dropdown-link">
                  数据
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <router-link :to="{ name: 'teamStatistics' }"
                      >球队统计</router-link
                    >
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link :to="{ name: 'playerStatistics' }"
                      >球员统计</router-link
                    >
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link :to="{ name: 'statisticTotal' }"
                      >数据总览</router-link
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-dropdown>
                <span class="el-dropdown-link">
                  UWB
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <router-link :to="{ name: 'uwb' }">UWB系统</router-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>
          </el-main>
        </el-container>
      </el-header>
      <el-main class="show-content">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import AllPass from "../components/differentPass/AllPass";
import Crosses from "../components/differentPass/Crosses";
import ThroughPass from "../components/differentPass/ThroughPass";
import LongPass from "../components/differentPass/LongPass";
import KeyPass from "../components/differentPass/KeyPass";
import axios from "axios";
export default {
  name: "Home",
  components: {
    AllPass,
    Crosses,
    ThroughPass,
    LongPass,
    KeyPass,
  },
  data() {
    return {
      leagues: [
        { leagueName: "中超联赛", leagueId: 1 },
        { leagueName: "中甲联赛", leagueId: 2 },
      ],
      search_content: "",
      currPassIndex: 0,
    };
  },
  methods: {
    changePass(index) {
      this.currPassIndex = index;
    },
  },
  async created() {},
};
</script>

<style scoped>
.home {
  font-family: "微软雅黑", serif;
}
.first-header {
  background-color: #01538b;
  width: 100%;
  color: #333;
  text-align: center;
  padding: 0;
}
.my-content {
  /*background: red;*/
  min-height: 115px;
  font-size: 48px;
}
.next-content {
  /*background: darkcyan;*/
  height: 115px;
  color: white;
}
.input-block {
  display: flex;
  align-items: center;
}
.my-block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-name {
  /*background-color: #B500FE;*/
  margin-right: 20px;
  line-height: 115px;
}
.logo-img {
  margin-top: 10px;
  width: 96px;
  height: 96px;
}
.bsu_sse {
  /*background-color: #B500FE;*/
  line-height: 115px;
  font-size: 34px;
  font-family: "华文行楷", serif;
}
.vertical-block {
  width: 2px;
  height: 70px;
  background-color: #fff;
}
.second-header {
  padding: 0;
}
.nav-bar {
  color: #fff;
  font-size: 20px;
  background-color: #101010;
  font-family: "微软雅黑", serif;
  padding: 8px;
  border-bottom: 2px solid rgba(35, 125, 181, 74);
}
.two-dropdown {
  display: flex;
  justify-content: space-between;
  margin-left: 225px;
  width: 220px;
  /* background-color: red; */
}
.el-dropdown {
  color: #fff;
  font-size: 20px;
}
a {
  color: #606266;
  text-decoration: none;
}
.router-link-active {
  /*background-color: red;*/
  text-decoration: none;
  color: #01538b;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.show-content {
  /*background-color: red;*/
  color: #333;
  text-align: center;
  line-height: 10px;
  height: 1500px;
  width: 100%;
  background: url("../assets/image/common/Bernabeu.jpg") no-repeat center;
  background-size: 100% 100%;
}
.box-card {
  /*border-radius: 20px;*/
  width: 1440px;
  height: 553px;
  margin: auto;
}
.pass-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(1, 83, 139, 0.59);
  padding: 0;
}
.pass-header-title {
  display: flex;
  justify-content: space-between;
  line-height: 57px;
  width: 230px;
  font-size: 28px;
  color: #fff;
  /*background-color: red;*/
  letter-spacing: 8px;
}
.triangle {
  border-style: solid;
  border-width: 29px;
  border-color: #65d6c1 transparent transparent #65d6c1;
  width: 0;
  height: 0;
}
.pass-main {
  height: 496px;
  padding: 0;
  background-color: #f1f6f9;
}
.my-el-tabs {
  margin-top: 15px;
  margin-right: 25px;
}
.my-el-tabs /deep/ .el-tabs__item {
  color: white;
}
.my-el-tabs /deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
.my-el-tabs /deep/ .el-tabs__active-bar {
  height: 3px;
  background-color: #65d6c1;
}
.my-el-tabs /deep/ .el-tabs__item:hover {
  color: #65d6c1;
}
.my-el-tabs /deep/ .el-tabs__item.is-active {
  color: #65d6c1;
}

.second-box-card {
  /*display: flex;*/
  /*flex-direction:column;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
  /*line-height: 75px;*/
  /*margin-top: 20px;*/
  margin-left: 10px;
  border-radius: 10px;
  /*line-height: 70px;*/
  /*height: 500px;*/
  width: 126px;
  height: 413px;
}
.third-box-card {
  border-radius: 10px;
  height: 413px;
  /*background-color: red;*/
  /*width: 1500px;*/
}
</style>
